<template>
	<div class="tab-title-page goods_list">
		<div class="common_form_search">
			<el-form ref="searchForm" :inline="true" :model="searchForm">
				<el-form-item label="订单编号">
					<el-input v-model="searchForm.order_no" placeholder="请输入订单编号" clearable />
				</el-form-item>
				<el-form-item label="用户名称">
					<el-input v-model="searchForm.user_name" placeholder="请输入用户名称" clearable />
				</el-form-item>
				<el-form-item label="租期筛选">
					<el-select v-model="searchForm.lease_term" placeholder="全部" clearable>
						<el-option v-for="item in leaseList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="实际支付日">
					<my-date-picker ref="myDatePicker_pay" />
				</el-form-item>
				<el-form-item label="起租日筛选">
					<my-date-picker ref="myDatePicker_start" />
				</el-form-item>
				<el-form-item label="结算时间筛选">
					<my-date-picker ref="myDatePicker_end" />
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="search()">查询</el-button>
					<el-button size="small" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-tabs v-model="activeName" class="flex-1 nav_tabs" @tab-click="handleClick">
			<el-tab-pane :label="`待结算(${count.no_settle})`" name="0" />
			<el-tab-pane :label="`已结算(${count.settled})`" name="1" />
			<el-tab-pane :label="`拒绝结算(${count.refuse_settle})`" name="2" />
		</el-tabs>
		<el-divider class="middle_divider" />
		<div class="child_page" style="background-color: #fff;">
			<div class="flex align-center table-top-btns">
				<h5 class="flex align-center title">数据列表</h5>
			</div>
			<el-table :data="tableData" border :row-class-name="rowStyle" v-show="tableData.length > -1">
				<el-table-column fixed="left" align="center" prop="trade_no" label="ID" width="150" />
				<el-table-column align="center" prop="goods_title" label="商品名称" width="180" />
				<el-table-column align="center" label="期数" width="90">
					<template slot-scope="scope">
						<p class="text-ellipsis">
							{{ scope.row.which_period }}/{{ scope.row.month_total }}
						</p>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="order_time" label="租期" width="120" />
				<el-table-column align="center" prop="lease_time" label="预计扣款日" width="100" />
				<el-table-column align="center" prop="pay_time" label="实际支付日" width="100" />
				<el-table-column align="center" prop="settle_time" label="结算时间" width="100" />
				<el-table-column align="center" label="账单金额" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.rent">￥{{ scope.row.rent }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="实付金额" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.paid_rent">￥{{ scope.row.paid_rent }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="lease_status" label="支付状态" width="100" />
				<el-table-column align="center" prop="overdue_days" label="逾期天数" width="90" />
				<el-table-column align="center" label="佣金" width="120">
					<template slot-scope="scope">
						￥{{ scope.row.reward_amount==null?'0.00':scope.row.reward_amount }}
					</template>
				</el-table-column>

				<el-table-column align="center" prop="reason" label="结算原因" width="120" />
				<el-table-column label="用户姓名" width="220">
					<template slot-scope="scope">
						<p>
							{{ scope.row.realname }}
						</p>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="financing_type" label="账户类型" width="100" />
				<el-table-column fixed="right" align="center" prop="order_type" label="订单状态" width="100" />
				<el-table-column fixed="right" align="center" label="结算状态" width="100">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.reward_type"
							:type="scope.row.reward_type == '未结算' ? 'danger' : scope.row.reward_type == '已结算' ? '' : 'success'">
							{{ scope.row.reward_type }}
						</el-tag>
					</template>
				</el-table-column>
				<!-- <el-table-column fixed="right" align="center" label="操作" width="180">
					<template slot-scope="scope">
						<el-button v-if="scope.row.reward_type == 0" type="warning" size="mini"
							@click="settlement(scope.row)">结算
						</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<div class="flex align-center justify-end custom_page">
				<span class="total">共{{ pageTotal }}页</span>
				<span class="total">共{{ total }}条</span>
				<el-pagination class="text-right" prev-text="上一页" next-text="下一页" :page-size="pageSize"
					:page-sizes="pageList" :total="total" background :layout="layout" :current-page.sync="page"
					@current-change="handleCurrentChange" @size-change="handleSizeChange" />
			</div>
			<!-- <custom-page ref="customPage" :total="total" @getList="getList" /> -->
		</div>
		<el-dialog title="撤销" :visible.sync="repealVisible" width="30%" center class="dialog">
			<span>确定要撤销拒绝吗?</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="repealVisible = false">取 消</el-button>
				<el-button type="primary" @click="repealRefused">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		settleList,
		orderSettle
	} from '@/api/account'
	import myDatePicker from '@/components/common/myDatePicker'
	export default {
		components: {
			myDatePicker,
		},
		data() {
			return {
				searchForm: {
					order_no: '',
					user_name: '',
					shop_name: '',
					lease_term: '',
					pay_time: '',
					start_time: '',
					end_time: '',
				},
				activeName: '0',
				leaseId: 0,
				count: {
					no_settle: 0,
					settled: 0,
					refuse_settle: 0
				},
				leaseList: [{
						value: 1,
						label: '第1期'
					},
					{
						value: 2,
						label: '第2期'
					},
					{
						value: 3,
						label: '第3期'
					},
					{
						value: 4,
						label: '第4期'
					},
					{
						value: 5,
						label: '第5期'
					},
					{
						value: 6,
						label: '第6期'
					},
					{
						value: 7,
						label: '第7期'
					},
					{
						value: 8,
						label: '第8期'
					},
					{
						value: 9,
						label: '第9期'
					},
					{
						value: 10,
						label: '第10期'
					},
					{
						value: 11,
						label: '第11期'
					},
					{
						value: 12,
						label: '第12期'
					}
				],
				total: 0,
				tableData: [],
				repealVisible: false,
				page: 1,
				pageSize: 10,
				pageList: [5, 10, 20, 50, 100],
			}
		},
		computed: {
			pageTotal() {
				const num = Math.ceil(this.total / this.pageSize)
				return num > 0 ? num : 1
			},
			layout() {
				if (this.total === 0) {
					return 'prev, pager, next'
				}
				if (this.pageTotal > 1) {
					return 'sizes, prev, pager, next, jumper'
				}
				return 'sizes, prev, pager, next'
			}
		},
		methods: {
			rowStyle({
				row
			}) {
				if (row.lease_is_settle === 2) {
					return 'red-font'
				} else {
					return ''
				}
			},
			// 结算
			settlement(item) {
				console.log(item);
				const h = this.$createElement;
				this.$msgbox({
					title: '结算',
					message: h('p', null, [
						h('span', null, '本次结算的订单号：'),
						h('h3', {
							style: 'color: teal'
						}, item.trade_no),
						h('span', null, '租期为：'),
						h('h3', {
							style: 'color: teal'
						}, item.order_time),
						h('span', null, '佣金为：'),
						h('h3', {
							style: 'color: teal'
						}, "￥" + item.reward_amount)
					]),
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							orderSettle(item.lease_id).then((res) => {
								console.log(res);
								this.getList()
								// this.$message({
								// 	type: 'info',
								// 	message: '结算成功' 
								// });
								done();
							})
						} else {
							done();
						}
					}
				})
			},
			// 拒绝
			refuse(id) {
				this.leaseId = id
				// this.$refs.refuseSettle.dialogVisible = true
			},
			// 撤销
			repeal(id) {
				this.leaseId = id
				this.repealVisible = true
			},
			repealRefused() {
				// cancelRefuseSettle(this.leaseId).then((res) => {
				// 	console.log(res);
				// 	this.repealVisible = false
				// 	this.getList()
				// })
			},
			jumpOrder(orderId) {
				this.$router.push({
					name: 'orderList',
					params: {
						orderId
					}
				})
			},
			// 获取数据
			getList(flag) {
				// flag为true, 则不刷新表格
				// const {
				// 	page,
				// 	pageSize
				// } = this.$refs.customPage
				if (!flag) {
					this.tableData = []
				}
				const {
					page,
					pageSize
				} = {
					page: this.page,
					pageSize: this.pageSize
				}

				settleList({
					page,
					pageSize,
					...this.searchForm,
					settle_status: this.activeName
				}).then(res => {
					this.tableData = res.data || []
					this.count = res.count
				})
				// auditSettleList({
				// 	page,
				// 	pageSize,
				// 	...this.searchForm,
				// 	settle_status: this.activeName
				// }).then((res) => {
				// 	this.tableData = res.data || []
				// 	this.total = res.total
				// 	for (const key in this.count) {
				// 		this.count[key] = res.count[key]
				// 	}
				// })
			},
			// 查询
			search() {
				const pickerVal_pay = this.$refs.myDatePicker_pay.getVal()
				const pickerVal_start = this.$refs.myDatePicker_start.getVal()
				const pickerVal_end = this.$refs.myDatePicker_end.getVal()
				if (pickerVal_pay !== 'error') {
					this.searchForm.pay_time = pickerVal_pay
				}
				if (pickerVal_start !== 'error') {
					this.searchForm.start_time = pickerVal_start
				}
				if (pickerVal_end !== 'error') {
					this.searchForm.end_time = pickerVal_end
				}
				this.page = 1
				this.getList()
			},
			// 重置
			reset() {
				if (this.$refs.myDatePicker_pay) {
					this.$refs.myDatePicker_pay.reset()
				}
				if (this.$refs.myDatePicker_start) {
					this.$refs.myDatePicker_start.reset()
				}
				this.searchForm = {
					order_no: '',
					user_name: '',
					shop_name: '',
					lease_term: ''
				}
				this.getList()
			},
			handleClick(tab) {
				this.activeName = tab.name
				// this.$refs.customPage.page = 1
				this.getList()
			},
			changePageSize(val) {
				this.pageSize = val
				if (this.pageList.indexOf(val) === -1) {
					this.pageList.unshift(val)
				}
			},
			handleSizeChange(val) {
				this.page = 1
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			}
			// exportFile() {
			// 	orderLeaseSettleExport({
			// 		...this.searchForm,
			// 		pay_time: this.searchForm.pay_time,
			// 		start_time: this.searchForm.start_time,
			// 		end_time: this.searchForm.end_time,
			// 		settle_status: this.activeName
			// 	})
			// }
		},
		mounted() {
			this.getList()
		}
	}
</script>

<style lang="less" scoped>
	.el-button--warning.is-plain {
		color: #ff9f38;
		background: #fff;
		border-color: #ff9f38;
	}

	.el-icon-upload2 {
		font-size: 18px;
	}

	.dialog {
		text-align: center;
	}

	.goods_info {
		.info {
			margin-left: 10px;

			p {
				color: #666666;
			}

			p:first-child {
				color: #999999;
			}
		}
	}

	.activity {
		line-height: 24px;

		span {
			width: 20px;
			height: 20px;
			margin-left: 10px;
		}
	}

	.common_form_search {
		padding-top: 15px;
		padding-left: 15px;
		padding-right: 15px;
		background-color: #ffffff;
		border-bottom: 1px solid #eeeeee;
	}

	.el-divider--horizontal {
		margin: 0
	}

	.nav_tabs {
		background-color: #fff;
		padding: 10px 10px 0px 10px;
	}

	.title {
		font-size: 20px;
	}

	.custom_page {
		margin-top: 15px;

		.total {
			margin-right: 10px;
		}

		.page_btn {
			color: #333333;
			background: #ffffff;
			border: 1px solid #eeeeee;
			font-size: 14px;
			padding-left: 12px;
			padding-right: 12px;
			min-width: 30px;
			border-radius: 2px;
			height: 28px;
			vertical-align: top;
			cursor: pointer;
		}

		.el-pagination__jump {
			margin-left: 10px;
			margin-right: 10px;
		}
	}
</style>
